共计 957 个字符，预计需要花费 3 分钟才能阅读完成。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>jsx 语法规则 </title>
<style>
.title {
background-color: orange;
width: 200px;
}
</style>
</head>
<body>
<!-- 准备好一个“容器”-->
<div id="test"></div>
<!-- 引入 react 核心库 -->
<script type="text/javascript" src="react.development.js"></script>
<!-- 引入 react-dom，用于支持 react 操作 DOM -->
<script type="text/javascript" src="react-dom.development.js"></script>
<!-- 引入 babel，用于将 jsx 转为 js -->
<script type="text/javascript" src="babel.min.js"></script>
<script type="text/babel">
const myId = "myId"
const myData = "123"
// 1. 创建虚拟 DOM
const VDOM = (
<div>
<h2 className="title" id={myId.toLowerCase()}>
<span style={{color: "white", fontSize: "29px"}}>{myData}</span>
</h2>
<input type="text" />
</div>
)
// 2. 渲染虚拟 DOM 到页面
ReactDOM.render(VDOM, document.getElementById("test"))
</script>
</body>
</html>jsx 语法规则
- 定义虚拟 DOM 时，不要写引号
- 标签中混入 JS 表达式时要用{}
- 样式的类名指定不要用 class，要用 className
- 内联样式，要用
style={{key:value}}的形式去写 - 只有一个根标签
- 标签必须闭合
- 标签首字母：若小写字母开头，则将该标签转为 html 中同名元素，若 html 中无该标签对应的同名元素，则报错。若大写字母开头，react 就去渲染对应的组件，若组件没有定义，则报错
正文完
